<template>
  <!-- 引用组件：下拉框(带tags的多选) -->
  <div class="LSelect_root" :style="`width: ${width}px`">
    <span class="label">{{ label }}</span>
    <el-select
      v-model="value"
      :placeholder="placeholder"
      size="mini"
      style="flex: 1"
      clearable
      collapse-tags
      multiple
    >
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      >
      </el-option>
    </el-select>
  </div>
</template>

<script>
export default {
  name: "LSelect",

  props: {
    value: {
      type: String,
      default: "",
    },
    options: {
      type: Array,
      default: () => {
        return [];
      },
    },
    label: {
      type: String,
      default: "地区",
    },
    placeholder: {
      type: String,
      default: "请选择",
    },
    width: {
      type: Number,
      default: 330,
    },
  },

  data() {
    return {
      // value: "",
      // options: [
      //   {
      //     value: "1",
      //     label: "",
      //   },
      // ],
    };
  },
  updated() {
    this.$emit("multiple-selected", this.value);
  },
};
</script>
<style lang="less" scoped>
.LSelect_root {
  height: 40px;
  background-image: url("../assets/img/1.png");
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  padding: 0 6px 10px 20px;
  box-sizing: border-box;
  justify-content: space-between;

  .label {
    font-size: 15px;
    font-weight: 400;
    color: #b8f9ff;
    padding: 0 9px;
    box-sizing: border-box;
    flex-shrink: 0;
  }
}
</style>
